<template>
  <div class="todoapp">
    <todo-header></todo-header>
    <todo-main :newlist='newlist'></todo-main>
    <todo-footer @changBtn='changFn' :type='getSel' :newlist='newlist' @clearFn='clearBtn'></todo-footer>
  </div>
</template>

<script>
import TodoFooter from './components/TodoFooter.vue' // shift + alt + 下
import TodoHeader from './components/TodoHeader.vue' // shift + alt + 下
import TodoMain from './components/TodoMain.vue' // shift + alt + 下
export default {
  data() {
    return {
      getSel:'all',
      list:this.$store.state.taskList,
    }
  },
computed:{
    newlist(){
      if(this.getSel === 'yes'){
        return this.list.filter(item => item.isShow === true)
      }else if(this.getSel === 'no'){
        return this.list.filter(item => item.isShow === false)
      }else{
        return this.list
      }
    }
  },
  components: {
    TodoFooter,
    TodoHeader,
    TodoMain
  },

  created() {

  },

  methods: {
    changFn(type){
      this.getSel = type
    },
    clearBtn(){
      this.list = this.list.filter((item) => item.isShow === true)
    }
  }
}
</script>

<style scoped>
</style>
